<template>
	<div style="padding:0 30px 50px;">
		<div v-show="agentDialog">
			<!--搜索输入框-->
			<div class="search">
		  		<div class="search-input">
		  			<div>
		  				<label>{{ $t('search.AgentName1') }}：</label>
		  				<el-input v-model="searchAgentData.dName" class="block-ipt" :maxlength='100' ></el-input>
		  			</div>
		  			<div>
		  				<label>{{ $t('search.levelID') }}：</label>
		  				<el-input v-model="searchAgentData.distributorId" class="block-ipt"></el-input>
		  			</div>
		  			<div class="shangji">
		  				<label>{{ $t('search.UpperLevel') }}：</label>
		  				<el-input v-model="searchAgentData.pdName" class="block-ipt" :maxlength='100' ></el-input>
		  			</div>
		  			<div>
		  				<label>{{ $t('search.Status1') }} ：</label>
		  				<el-select v-model="searchAgentData.state" :placeholder="$t('placeH.All')" clearable  class='filter-item condition block-ipt'>
		  		 			<el-option :value="$t('search.Rejected')"></el-option>
				    		<el-option :value="$t('search.Pending')"></el-option>
				    		<el-option :value="$t('button.Suspended')"></el-option>
				    		<el-option :value="$t('button.Enabled')"></el-option>
				    	</el-select>
		  			</div>
		  			<div>
		  				<label>{{ $t('search.EstablishmentDate') }}：</label>
		  				<el-date-picker v-model="searchAgentData.date" :editable=false class="filter-item block-ipt" type="date"></el-date-picker>
		  				<!--<el-date-picker v-model="searchAgentData.month" placeholder="月" style="width: 80px;margin-right:5px;" :editable=false class="filter-item block-ipt" type="month"></el-date-picker>
		  				<el-date-picker v-model="searchAgentData.day" placeholder="日" style="width: 80px;margin-right:5px;" :editable=false class="filter-item block-ipt" type="date"></el-date-picker>-->
		  			</div>
		  		</div>
		  		<div class="search-btn">
		  			<el-button class="blue-btn mini2-btn" @click="search()">{{ $t('button.search') }}</el-button>
		  			<el-button class="blue-btn mini2-btn" @click="delSelect()">{{ $t('button.Reset') }}</el-button>
		  			<el-button class="blue-btn max-btn btn-clearance" @click='showAgentAdd()'>{{ $t('button.NewAgent') }}</el-button>
		  		</div>
		  	</div>
		  	<!--代理商表单-->
			<template>
				<div class="table-border">
					<div class="table-head">{{ $t('agent.agent') }}</div>
					  	<el-table :data="agentDatas" style="width: 100%;" height=400>
						    <el-table-column type="index" fixed :label="$t('index.Number')" width="70">						    	
						    </el-table-column>
						    <el-table-column prop="name" :label="$t('agent.agent')" width="130">						    	
						    </el-table-column>
						    <el-table-column prop="id" :label="$t('search.levelID1')" width="120">						    	
						    </el-table-column>
						    <el-table-column prop="state" :label="$t('search.Status')" width="120" :formatter="modifyState">						    	
						    </el-table-column>
						    <el-table-column prop="parentName" :label="$t('search.UpperLevel')" width="150"> 
						    </el-table-column>
						    <el-table-column prop="merchantAmount" :label="$t('agent.DirectMerchants')" width="170">						    
						    </el-table-column>
						    <el-table-column prop="salesmanAmount" :label="$t('agent.BDStaff')" width="120">						    	
						    </el-table-column>
						    <el-table-column prop="subordinateAmount" :label="$t('agent.SubordinateAgents')" width="200">						    	
						    </el-table-column>
						    <el-table-column prop="addedDate" :label="$t('mec.CreationTime')" width="200">
						    </el-table-column>
						    <el-table-column :label="$t('index.Operation')" width="170">
							    <template scope="scope">
							    	<div style="text-align: left;">
							    		<el-button type="text" class='blue-btn mini-btn' size="small" @click='showAgentDtails(scope.row.id,scope.row.state)'>{{ $t('button.Manage') }}</el-button>
								        <el-button type="text" class='blue-btn mini-btn' v-if="scope.row.state==='2'" size="small" @click='stopOrStart(scope.row.enabled,scope.row.id,scope.row.userId)' >{{ $t('button.Suspended1') }}</el-button>
								        <el-button type="text" class='blue-btn mini-btn' v-if="scope.row.state==='3'" size="small" @click='stopOrStart(scope.row.enabled,scope.row.id,scope.row.userId)' >{{ $t('button.Enabled1') }}</el-button>
										<!-- <el-button type="text" class='blue-btn mini-btn' v-if="scope.row.state==='0'" size="small" @click='del(scope.row.id)' >{{ $t('button.delete') }}</el-button> -->
							    	</div>
							    </template>
						    </el-table-column>
					 	</el-table>
					<div class="pagination-container">
		    			<el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page.sync="searchAgentData.page" :page-sizes="[10,20,30,50]" :page-size="searchAgentData.pageSize" layout="total, sizes, prev, pager, next, jumper" :total="res.total"></el-pagination>
		  			</div>
				</div>
		  	</template>
		</div>
		<agentManage v-if='agentManageDialog' @agentManageChange="agentManageFun" :id="id" :state=state :distributorId="distributorId"></agentManage>
	</div>
</template>

<script>
	import { agentManage } from 'views/z_businessManagement/components';
	import { createAgent,agentAll,agentDetails,modifyAgent,updateStateAgent,delAgent } from 'api/merchant/agent/index';
	export default{
		name: 'agent',
		components: { agentManage },
		data(){
			return {
				agentDialog:true,
				agentManageDialog:false,
				id:null,//根据父组件传递的id 判断用户操作为查看详情 或是新增
				distributorId:null, //代理商id
				state:null,
				res:[],
				searchAgentData:{
					page: 1,
				  	pageSize: 10,
				  	dName:undefined,
				  	pdName:undefined,
				  	distributorId:undefined,
				  	date:undefined,
				  	state:undefined,
				  	year:undefined,
				  	month:undefined,
				  	day:undefined,
				},
				agentDatas:[],//代理商列表
			}
		},
		created(){
			this.getAgentList(this.searchAgentData);
		},
		mouted(){
			
		},
		methods:{
			selectColor(row){
				return this.activeColor = row.enabled === false ? '#D81334' : '#0006FF';
			},
			//格式化显示数据
			modifyState(row){
				let state = row.state;
				if(state === "0" ){
					return state = this.$t('search.Rejected');
				}else if(state === "1" ){
					return state = this.$t('search.Pending');
				}else if(state === "2" ){
					return state = this.$t('button.Enabled');
				}else if(state === "3" ){
					return state = this.$t('button.Suspended');
				}
			},
			//删除代理商 
			del(id){
				delAgent(id).then((res)=>{
					if(res.code === 0){
						this.getAgentList(this.searchAgentData);
					}
				}).catch(()=>{
					// this.getAgentList(this.oneAgentData);
				})
			},
			//停用或启用该代理商
			stopOrStart(enabled,id,userId){
				// console.log(enabled);
				let msg = enabled === false ? this.$t('hint.TheAgentIsEnabled') : this.$t('hint.TheAgentIsDisabled');
				let msgAll = enabled === false ? this.$t('hint.SureToEnableThisAgent') : this.$t('hint.SureToSuspendThisAgent');
				let modifyEnabled = {
					id:id,
					userId:userId,
					enabled:!enabled
				}
				this.$msgbox({
			        title: this.$t("hint.Alert"),
			        message: msgAll,
			        showClose:false,
			        showCancelButton: true,
			        confirmButtonText: this.$t('button.OK'),
			        cancelButtonText: this.$t('button.Cancel'),
		        }).then(()=>{
		        	updateStateAgent(modifyEnabled).then(res=>{
		        		this.getAgentList(this.searchAgentData);
		        		if(res.code === 0){
		        			this.$notify({
					            title: this.$t('hint.Success'),
					            message: msg,
					            type: 'success',
					            duration: 2000
				         	});
		        		}else{
		        			this.getMecList(this.getMecListData);
		        			// this.$notify({
					        //     title: this.$t('hint.Fail'),
					        //     message: msg + this.$t('hint.Fail'),
					        //     type: 'error',
					        //     duration: 2000
				         	// });
		        		}
		        	})
		        })
			},
			//查询全部代理商
			getAgentList(value){
				value.companyId = localStorage.getItem('companyId');
				value.pdistributorId = localStorage.getItem('distributorId');
				agentAll(value).then(res=>{
					this.agentDatas = res.value.list;
					this.res = res.value;
				}).catch(error=>{

				})
			},
			//清空筛选条件
			delSelect(){
				this.searchAgentData.dName='';
				this.searchAgentData.pdName='';
				this.searchAgentData.distributorId='';
				this.searchAgentData.state='';
				this.searchAgentData.date='';
				this.search();
			},
			//搜索
			search(){
				const searchData = {};
				$.extend( searchData , this.searchAgentData);
				this.formatObj(searchData);
//				if(searchData.dName === ''){
//					searchData.dName = null;
//				}if(searchData.pdName === ''){
//					searchData.pdName = null;
//				}
//				if(searchData.state === ''){
//					searchData.state = null;
//				}
//				if(searchData.distributorId === ''){
//					searchData.distributorId = null;
//				}
//				if(searchData.date === ''){
//					searchData.date = null;
//				}
				if(searchData.state === this.$t('search.Rejected') ){
					searchData.state = 0;
				}
				if(searchData.state === this.$t('search.Pending') ){
					searchData.state = 1;
				}
				if(searchData.state === this.$t('button.Enabled') ){
					searchData.state = 2;
				}
				if(searchData.state === this.$t('button.Suspended')){
					searchData.state = 3;
				}
				this.getAgentList(searchData);
			},
			//新增代理商按钮
			showAgentAdd(){
				this.agentData = {};
				this.id = 1,
  				this.agentDialog = false;
  				this.agentManageDialog = true;
			},
			//代理商详情
			showAgentDtails(id,state){
				this.id = 2,
				this.state = state;  
  				this.distributorId = id;
  				this.agentDialog = false;
  				this.agentManageDialog = true;
  			},
			//监听新增代理子组件事件
  			agentManageFun(){
  				this.agentDialog = true;
				this.agentManageDialog = false;
				this.getAgentList(this.searchAgentData);
  			},
			//pageSize 改变时会触发
		  	handleSizeChange(val) {
			    this.searchAgentData.pageSize = val;
			    this.search();
		  	},
		    //currentPage 改变时会触发
		    handleCurrentChange(val) {
		        this.searchAgentData.page = val;
		        this.search();
		    },
		    formatObj(obj){
				let arr = Object.keys(obj);
				for(let i = 0;i<arr.length;i++){
					if(obj[arr[i]] === ''){
						obj[arr[i]] = null;
					}
				}
			},
		}
	}
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
	/*.shangji{
		width: 300px;
	}*/
</style>